<template>
	<view class="empire-page">
		<EmpireNavigate :title="title"></EmpireNavigate>
		<EmpireSearch ref="searchRef"></EmpireSearch>
		<view class="empire-page__body" :style="mainStyle">
			<slot></slot>
		</view>
	</view>
</template>

<script setup>
import EmpireNavigate from '@/components/empire-navigate.vue';
import EmpireSearch from '@/components/empire-search.vue';
import { ref, shallowReactive, onMounted, getCurrentInstance } from 'vue';

defineProps({
	title: {
		type: String,
		default: undefined
	}
});
const searchRef = ref();
const mainStyle = shallowReactive({
	marginTop: '84px'
});
onMounted(() => {
	uni
		.createSelectorQuery()
		.in(searchRef.value)
		.select('.search-wrap')
		.boundingClientRect((node) => {
			mainStyle.marginTop = `${node?.height}px`;
		})
		.exec();
});
</script>

<style lang="scss" scoped>
.empire-page__body {
	padding: 30rpx;
}
</style>
